<script>
/**
 * @desc 行程路线
 */

import { navTo } from '@/utils'
import eatingIco from '@/assets/icons/eating.svg'
import aircraftIco from '@/assets/icons/aircraft.svg'
import busIco from '@/assets/icons/bus.svg'
import shipIco from '@/assets/icons/ship.svg'
import arrowIco from '@/assets/icons/arrow.png'

export default {
  name: 'travel-route',
  props: {
    data: Array
  },
  data: () => ({ eatingIco, arrowIco }),
  computed: {
    list() {
      return this.data.map(v => {
        const title = v.schedulePlaces
          .reduce((pre, curr) => pre + curr.name + ' + ', '')
          .slice(0, -3)
        const eatingStr =
          (v.isBreakfast ? '含早餐;' : '') +
          (v.isLunch ? '含午餐;' : '') +
          (v.isSupper ? '含晚餐' : '')
        const places = v.schedulePlaces.map(v => ({
          id: v.id,
          name: v.name,
          trafficIcon:
            v.traffic === '飞机'
              ? aircraftIco
              : v.traffic === '轮船' ? shipIco : v.traffic === '汽车' ? busIco : ''
        }))
        return { ...v, title, eating: eatingStr, places }
      })
    }
  },
  methods: { navTo }
}
</script>

<template>
  <div class="travel-route">
    <div
      v-for="(v,i) in list"
      :key="v.id"
      class="route-item"
      @click="navTo({name:'route-detail',query:{index:i}})"
    >
      <div class="day"><span class="d">Day</span><span class="num">{{i+1}}</span></div>
      <div class="about">
        <p class="title">{{v.title}}</p>
        <div class="info">
          <p class="eating">
            <img v-if="v.eating" :src="eatingIco" class="eating-icon" mode="aspectFill">
            <span class="eating-text">{{v.eating}}</span>
          </p>

          <p class="traffic">
            <block
             v-for="(o,j) in v.places"
             :key="j"
            >
              <span class="place-name">{{o.name}}</span>
              <img v-if="o.trafficIcon" :src="o.trafficIcon" class="traffic-icon" mode="aspectFill">
            </block>
          </p>
        </div>
      </div>

      <img :src="arrowIco" alt="" class="arrow-icon" mode="asepceFill">
    </div>
  </div>
</template>

<style lang="scss" scoped>
.travel-route {
  margin: 10px 0;
  box-sizing: border-box;
  background-color: #fff;

  .route-item {
    display: flex;
    align-items: center;
    margin: 0 10px;
    padding: 20px 10px;
    border-bottom: 1px solid $border-color;
  }

  .day {
    margin-right: 5px;
    .num {
      margin: 0 5px;
      color: $main-color;
    }
  }

  .about {
    flex: 1;
    font-size: 16px;
    overflow: hidden;
  }

  .title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .eating,
  .traffic {
    margin-top: 10px;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: $gray-font-color;
  }

  .place-name {
    margin-right: 5px;
  }

  .eating-icon,
  .traffic-icon {
    width: 20px;
    height: 20px;
    margin-right: 5px;
    vertical-align: middle;
  }

  .arrow-icon {
    width: 30px;
    height: 30px;
  }
}
</style>
